<template>
    <div class="xe2-container" ref="xe2Container" id="xe2Container"></div>
    <div class="layout">
        <CreateCamera></CreateCamera>
        <HightLight></HightLight>
    </div>
    <component v-for="(item, index) in components" :id="item.id" :index="item.component" :is="item.component" />
</template>
<!-- 用来注册组件使用，不然使用string名称动态创建组件不能映射到组件 -->
<script lang="ts">
import { defineComponent, onMounted, ref, Ref } from "vue";
import CameraProPerty from "./components/CameraProPerty.vue";
import CreateCamera from "./components/CreateCamera.vue";
import HightLight from "./components/HightLight.vue";
export default defineComponent({
    components: {
        CameraProPerty,
        CreateCamera,
        HightLight
    }
})
</script>
<script setup lang="ts">
import { getMyProjectManager } from "./getMyProjectManager";
import axios from "axios"


const xe2Container = ref(null)
const myProjectManager = getMyProjectManager()
const components: Ref<{ component: string, id: string }[]> = ref([]);

onMounted(() => {
    // 判断Dom元素是否存在
    if (!xe2Container.value) {
        console.error(`!xe2Container.value`)
        return
    }
    myProjectManager.viewerCreatedEvent.don(() => {
        // 初始化飞行定位
        viewer.flyIn([111.02853771887987, 34.66295836813279, 423.7595315150122], [43.390594482421875, -19.368080139160156, 6.7426948153017675e-15], 2)
        // 设置当前时间
        viewer.setCurrentTime("2025-01-01 12:00:00")
        // 监听JSON序列化状态
        myProjectManager.jsonLoadingEvent.don((...args) => {
            if (!(args.length > 0 && args[0].type == 'loaded')) return
            myProjectManager.functionActor.callFunction("SetHighLight", { Value: false })
            // 获取摄像头数据【这里用后续接口替换】
            axios.get("./cameras.json").then(res => {
                myProjectManager.cameraManager.init(res.data.data)
            })
        })
        // JSON初始化赋值
        axios.get("./scene.json").then(res => {
            myProjectManager.json = res.data
        })

    })
    // @ts-ignore
    const { uri, app, engine } = window.g_config
    // 创建视口
    const viewer = engine == "ue" ? myProjectManager.createUEViewer('xe2Container', uri, app) : myProjectManager.createCesiumViewer('xe2Container')


    // 组件动态创建
    myProjectManager.compontentManager.createEvent.don((data) => {
        components.value.push(data)

    })
    // 组件动态销毁
    myProjectManager.compontentManager.deleteEvent.don((data) => {
        const index = components.value.findIndex(item => {
            return item.component == data.component
        })
        if (index != -1) components.value.splice(index, 1)

    })

})




const switchEngine = (engine: string) => {
    switch (engine) {
        case 'Cesium':
            myProjectManager.switchToCesiumViewer('xe2Container')
            break;
        case 'UE':
            myProjectManager.switchToUEViewer('xe2Container', "http://localhost:9007/",
                'demo')
            break;
        default:
            break;
    }
}

</script>
<style>
html,
body,
#app,
.xe2-container {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    position: relative;
}

.layout {
    position: absolute;
    z-index: 100;
    padding: 30px;
    top: 0px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
}

.layout-right {
    position: absolute;
    right: 30px;
}
</style>
